<!DOCTYPE html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>The Nwabo African Market</title>
         <link rel="stylesheet" href="showcase/css/style.css" />
         <link rel="stylesheet" type="text/css" href="css/nav.css">
         <link rel="stylesheet" type="text/css" href="css/home.css">
         <script src="js/jquery-1.9.1-min.js" type="text/javascript"></script>
         <script type="text/javascript" src="showcase/js/jquery.aw-showcase.js"></script>
         <script type="text/javascript" src="js/imageSlider.js"> </script>     
    </head>
    <body>
          <?php include 'header.php';?>
             
        <section>
           <ul id="vertical-navigation">
                <li class=""> <a href="index.php">Home</a> </li>
                <li class=""> <a href="About.php">About</a>
                </li>
                
                <!-- End parent item -->

                <li class=""> <a href="Contact.php">Contact Us</a> </li>
                <li class=""> <a href="pictureGallery.php">Picture Gallery</a>

                  <ul class="">
                    <li class=""> <a href="#">Category 1</a> </li>
                    <li class=""> <a href="#">Category 2</a> </li>

                  </ul>
                  

                </li>
            </ul>
            
          <div id="showcase" class="showcase">
		<!-- Each child div in #showcase with the class .showcase-slide represents a slide. -->
		<div class="showcase-slide">
			<!-- Put the slide content in a div with the class .showcase-content. -->
			<div class="showcase-content">
				<img src="flex/images/Masks-from-Africa.jpg" alt="01" />
			</div>
			<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
			<div class="showcase-thumbnail">
				<img src="flex/images/Masks-from-Africa.jpg" alt="01" width="140px" />
				<!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. -->
				<div class="showcase-thumbnail-caption">Masks from Africa</div>
				<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
				<div class="showcase-thumbnail-cover"></div>
			</div>
			<!-- Put the caption content in a div with the class .showcase-caption -->
			<div class="showcase-caption">
				<h2>Be creative. Get Noticed!</h2>
			</div>
		</div>
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="flex/images/fertility-statues.jpg" alt="02" />
			</div>
			<div class="showcase-thumbnail">
				<img src="flex/images/fertility-statues.jpg" alt="01" width="140px" />
				<div class="showcase-thumbnail-caption">Fertility Statue</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
			<!-- Put the tooltips in a div with the class .showcase-tooltips. -->
<!--			<div class="showcase-tooltips">
				 Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. 
				<a href="about.php" coords="634,130">
					 The content of the anchor-tag is displayed in the tooltip. 
					This is a tooltip that displays the anchor html in a nice way.
				</a>
				<a href="http://www.awkward.se" coords="200,440">
					This is a tooltip that displays the anchor html in a nice way.
				</a>
				<a href="http://www.awkward.se" coords="600,440">
					This is a tooltip that displays the anchor html in a nice way.
				</a>
				<a href="http://www.awkward.se" coords="356, 172">
					 You can add multiple elements to the anchor-tag which are display in the tooltip. 
					<img src="images/glasses.png" />
					<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
						White Glasses: 500$
					</span>
				</a>
			</div>-->
		</div>
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="flex/images/artisanat-statue-africaine.jpg" alt="03" />
			</div>
			<div class="showcase-thumbnail">
				<img src="flex/images/artisanat-statue-africaine.jpg" alt="01" width="140px" />
				<div class="showcase-thumbnail-caption">African Statue </div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
		</div>
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="flex/images/africaine-fetiche.jpg" alt="04" />
			</div>
			<div class="showcase-thumbnail">
                               <img src="flex/images/africaine-fetiche.jpg" alt="01" width="140px" />
                               <div class="showcase-thumbnail-caption">African Fetiche</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
		</div>
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="flex/images/African_Statues_Fang.jpg" alt="05" />
			</div>
			<div class="showcase-thumbnail">
                                <img src="flex/images/African_Statues_Fang.jpg" alt="01" width="140px" />
				<div class="showcase-thumbnail-caption">African Statues</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
		</div>
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="flex/images/woodStatue.jpg" alt="06" />
			</div>
			<div class="showcase-thumbnail">
				<img src="flex/images/woodStatue.jpg" alt="06" width="140px" />
				<div class="showcase-thumbnail-caption">Wood Statue</div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
		</div>
		<div class="showcase-slide">
			<div class="showcase-content">
				<img src="flex/images/mask_african.jpg" alt="07" />
			</div>
			<div class="showcase-thumbnail">
				<img src="flex/images/mask_african.jpg" alt="07" width="140px" />
                                <div class="showcase-thumbnail-caption">African Mask </div>
				<div class="showcase-thumbnail-cover"></div>
			</div>
		</div>    
	</div>
          <p>The item history with a see more link</p>
     
    </section>   
          
    <?php include 'footer.php';?>
        
        <?php
        // put your code here
//        echo '';
        ?>
    </body>
    
</html>
